<template>
	<div class="page addPressure">
		<x-head></x-head>
		<div class="list">
			<group>
				<x-input type="number" v-model="formData.systolicPressure" id="input1" @on-blur="inputAction" title="收缩压(mmHg):" placeholder="正常范围 (90-139)" text-align="right" :required="true"></x-input>

				<x-input type="number" v-model="formData.diastolicPressure" ref="pressure2" @on-blur="inputAction2" title="舒张压(mmHg):" placeholder="正常范围 (60-89)" text-align="right" :required="true"></x-input>
				<x-input type="number" v-model="formData.p" ref="heart" title="心率(次/分):" @on-blur="inputAction3" placeholder="正常范围 (60-100)" text-align="right" :required="true"></x-input>
				<datetime title="选择时间" :value="testTime" placeholder="必选" @on-change="datetimeAction" :required="true" format="YYYY-MM-DD" start-date="1900-01-01" :end-date= 'currentDate'></datetime>
			</group>
		</div>
		<x-button id="btnbox" class='btn' @click.native='keep'>保存</x-button>
		
		<!-- 初始化弹窗  -->
		<x-dialog v-model="showToast">
			<div class="wrapp">
				<div class="top">测量注意事项</div>
				<div class="inner">
					<p>1.测量血压的时间选择在早上8-10点，在服药后的2小时进行检测；</p>
					<p>2.测血压前平静休息10-15分钟，要同一时间段测量同一手臂；</p>
					<p>3.手心向上，勿握拳，手臂与心脏在同一水平的桌面上。</p>
				</div>
				<x-button type="primary" style='background: rgb(58,175,252);width: 50%;border-radius:99px;' @click.native="agreeAction">同意</x-button>
			</div>
		</x-dialog>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	import xHead from '@/components/common/Head.vue'
	export default {
		components: {
			xHead
		},
		data() {
			return {
				currentDate: '',
				showToast: true,
				testTime: '',
				formData: {
					systolicPressure: '', //  收缩压
					diastolicPressure: '', //  舒张压
					p: '', //   心率
					testTime: '',
					customer_id: ''
				}
			}
		},
		created(){
			this.formData.customer_id = localStorage.getItem('customer_id');
		},
		mounted(){
			//  解决 手机键盘弹出bug
			var original = document.documentElement.clientHeight;
			window.addEventListener("resize", function() {
				var resizeHeight = document.documentElement.clientHeight;
				if(resizeHeight != original) {
					document.getElementById('btnbox').style.display = 'none'
				} else {
					document.getElementById('btnbox').style.display = 'block'
				}
			});
			this.dateFun() //  调 当前日期
		},
		methods: {
			//  获取当前日期
			dateFun(){
				var timestamp = (new Date()).getTime();
				var date = new Date(timestamp);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				let D = date.getDate();		D = D < 10 ? '0' + date.getDate() : D
				var currentDate = Y + M + D;
				this.currentDate = currentDate;
			},
			//  弹窗 同意
			agreeAction() {
				this.showToast = false;
			},
			// 收缩压
			inputAction(value) {
				if(value > 250) {
					this.$vux.toast.show({
						text: '收缩压不能超过250',
						type: 'text'
					})
					this.formData.systolicPressure = 250;
				} else if(value == '') {
					this.$vux.toast.show({
						text: '收缩压不能为空',
						type: 'text'
					})
				} else {
					this.formData.systolicPressure = value;
				}

			},
			// 舒张压
			inputAction2(value) {
				if(value > 150) {
					this.$vux.toast.show({
						text: '舒张压不能超过150',
						type: 'text'
					})
					this.formData.diastolicPressure = 150;
				} else if(value == '') {
					this.$vux.toast.show({
						text: '舒张压不能为空',
						type: 'text'
					})
				} else {
					this.formData.diastolicPressure = value;
				}
			},
			// 心率
			inputAction3(value) {
				if(value > 150) {
					this.$vux.toast.show({
						text: '心率不能超过150',
						type: 'text'
					})
					this.formData.p = 150;
				} else if(value == '') {
					this.$vux.toast.show({
						text: '心率不能为空',
						type: 'text'
					})
				} else {
					this.formData.p = value;
				}
			},
			// 选择时间
			datetimeAction(date) {
				// 日期转时间戳
				this.formData.testTime = Date.parse(new Date(date));
				console.log(this.formData)
			},
			// 保存
			keep() {
				if(this.formData.systolicPressure !== '' && this.formData.diastolicPressure !== '' && this.formData.p !== '' && this.formData.testTime !== '') {
					console.log(this.formData)
					let param = new URLSearchParams()
					param.append('customer_id', this.formData.customer_id);
					param.append('systolicPressure', this.formData.systolicPressure)
					param.append('diastolicPressure', this.formData.diastolicPressure)
					param.append('p', this.formData.p)
					param.append('testTime', this.formData.testTime)
					this.$http({
							method: 'post',
							url: Api.BPmonitorAddApi,
							data: param
						})
						.then((res) => {
							console.log(res)
							this.$router.push({
								path: '/datamonitor'
							})
						})
						.catch((err) => {
							console.log(err)
						})
				} else {
					this.$vux.toast.show({
						text: '资料未填写完整',
						type: 'cancel'
					})
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.addPressure {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		width: 100%;
		height: 100%;
		overflow: auto;
		.wrapp {
			padding-bottom: 14px;
			.top {
				color: #fff;
				background: rgb(58, 175, 252);
				padding: 20px;
				font-size: 18px;
			}
			.inner {
				padding: 20px;
				text-align: left;
				p {
					margin-bottom: 4px;
					font-size: 15px;
				}
			}
		}
	}
	
	.btn {
		position: absolute !important;
		left: 0 !important;
		bottom: 0 !important;
		background: rgb(58, 175, 252);
		color: #fff;
	}
</style>